#{extends 'main.html' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/common.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/edit.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/navigationbar.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/commodity.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/pager/Pager.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/order.scss'}" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/pager/jquery.pager.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
<script language="javascript">
$(function(){
	//把用户中心设置为选中状态
	$(".categorynav ul li").removeClass("active");
	$("#user_item").addClass("active");
});
	function doSearch() {
		$("#form1").submit();
	}
</script>
<div id="edit-comment">
	<center><h1>订单商品修改</h1></center>
	<div id="errMsg" class="error">
		${errMsg}
	</div>
	<table class="commodity-table">
		<thead>
			<tr>
				<th>产品图片</th>
				<th>编号</th>
				<th>名称</th>
				<th>单价(元)</th>
				<th>单个重量(KG)</th>
				<th>现货数量</th>
				<th>订货数量</th>
				<th>备注</th>
				<th>小计(元)</th>
				<th>移除</th>
			</tr>
		</thead>
		#{if order.orderItems}
			#{list items:order.orderItems, as:'orderItem'}
			<tr>
				<td>
					<input type="hidden" class="orderIds" value="${orderItem.id}">
					<a href="/commodities/${orderItem.commodity.id}">
						#{if orderItem.commodity.image}
						<img class="midImg" src="@{Attachments.show(orderItem.commodity.image.id)}"/>
						#{/if}
						#{else}
						<img class="midImg" src="@{'public/images/favicon.png'}"/>
						#{/else}
					</a>
				</td>
				<td><a href="/commodities/${orderItem.commodity.id}">${orderItem.commodity.SN}</a></td>
				<td><a href="/commodities/${orderItem.commodity.id}">${orderItem.commodity.name}</a></td>
				<td><span class="price">${orderItem.price}</span></td>
				<td><font class="important">${orderItem.weightPerUnit}</font></td>
				<td>
					#{if orderItem.commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_LIMITED}
						${orderItem.commodity.quantityLeft}&nbsp;${orderItem.commodity.unit}
					#{/if}
					#{if orderItem.commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_UNLIMITED}
						<font class="important">长期有货</font>
					#{/if}
					#{if orderItem.commodity.onSaleStatus == models.Commodity.OnSaleStatus.OFFSALE}
						<font class="important">已下架</font>
					#{/if}
				</td>
				<td><input id="quantity_${orderItem.id}" maxlength="5" type="text" maxlength="4" size="3" value="${orderItem.quantity}">${orderItem.commodity.unit}</td>
				<td><input id="remark_${orderItem.id}" maxlength="255" type="text" size="8" value="${orderItem.remark}"></td>
				<td><span class="price">${orderItem.price*orderItem.quantity}</span></td>
				<td>
					<a href="javascript:removeOrderItem(${orderItem.id})" title="移除">
						<img class="minImg" src="@{'public/images/delete.gif'}">
					</a>
				</td>
			</tr>
			#{/list}
		#{/if}
		#{else}
			<tr>
				<td colspan="10">没找到记录。</td>
			</tr>
		#{/else}
	</table>
	<div>
			商品总价格：<font class="price">${order.commodityPrice}</font>元&nbsp;
			商品总重量：<font class="price">${order.totalWeight}</font>KG&nbsp;
			商品总运费：<font class="price">${order.totalFreight}</font>元&nbsp;
			订单总价格：<font class="price">${order.totalPrice}</font>元&nbsp;
	</div>
	<div>
		<input type="button" class="button1" value="修改订单" onClick="editOrderDetail()">
		<input type="button" class="button1" value="保存并计算" onClick="save()">
		<input type="button" class="button1" value="删除订单" onClick="removeOrder()">
		<a href="@{users.order}"><input type="button" class="button1" value="返回列表"></a>
	</div>
	<div id="pager"></div>
	
	<script language="javascript">
	//删除指定商品
	function removeOrderItem(id) {
		$.ajax({
			url: "@{orders.removeOrderItem()}",
			data: "id="+id,
			type: "GET",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "操作失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
					window.location.href = "@{users.order()}";
				} else {
					window.location.href = "@{orders.editOrderItems(order.id)}";
				}
			}
		});
	}
	//删除指定订单。
	function removeOrder() {
		$.ajax({
			url: "@{orders.removeOrder(order.id)}",
			type: "GET",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "操作失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
					window.location.href = "@{users.order()}";
				} else {
					window.location.href = "@{users.order()}";
				}
			}
		});
	}
	//保存并计算。
	function save(callBack){
		var orderIds = $(".orderIds");
		if(!orderIds || orderIds.length==0) {
			alert("没有记录。");
		}
		var dataStr = "";
		for(var i=0 ; i<orderIds.length ; i++) {
			var id = orderIds[i].value;
			var quantity = $("#quantity_"+id).val();
			var remark = $("#remark_"+id).val();
			if(i != 0) dataStr += "&";
			dataStr = dataStr + "orders[" + i + "].id=" + id;
			dataStr = dataStr + "&" + "orders[" + i + "].quantity=" + quantity;
			dataStr = dataStr + "&" + "orders[" + i + "].remark=" + remark;
		}
		$.ajax({
			url: "@{orders.saveOrderItems(order.id)}",
			data: dataStr,
			type: "POST",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "保存失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
				} else {
					if(callBack) {
						callBack();
					} else {
						var errMsg = "保存成功。";
						$("#errMsg").html(errMsg);
						alert(errMsg);
						window.location.href = "@{orders.editOrderItems(order.id)}";
					}
				}
			}
		});
	}
	//生成订单。
	function editOrderDetail() {
		save(function(){
			window.location.href="@{orders.editOrderDetail(order.id)}";
		});
	}
	</script>
</div>